<template>
  <div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">是否可见</p>
      <div class="col-3 attr-item-edit-input textLeft">
        <el-switch v-model="yAxisData.show" size="mini">
        </el-switch>
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">范围</p>
      <div class="col-2 attr-item-edit-input">
        <el-select v-model="yAxisData.min" @change="throttleAddHistory" size="mini">
          <el-option  label="数据最小值" value='dataMin'>数据最小值</el-option>
          <el-option  value='自定义输入' :disabled='true'>
            <el-input-number size="mini" v-model="yAxisDataMin" controls-position="right" :min="0" />
          </el-option>
        </el-select>
      </div>
      <div class="col-2 attr-item-edit-input">
        <el-select v-model="yAxisData.max" @change="throttleAddHistory" size="mini">
          <el-option  label="数据最大值" value='dataMax'>数据最大值</el-option>
          <el-option  value='自定义输入' :disabled='true'>
            <el-input-number size="mini" v-model="yAxisDataMax" controls-position="right" :min="0" />
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">显示数量</p>
      <div class="col-2 attr-item-edit-input">
        <el-input-number size="mini" v-model="yAxisData.splitNumber" controls-position="right" :min="0" />
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">文本样式</p>
      <div class="col-2 attr-item-edit-input">
        <el-input-number size="mini" v-model="yAxisData.axisLabel.fontSize " controls-position="right" :min="0" />
      </div>
      <div class="col-2 attr-item-edit-input">
        <el-select v-model="yAxisData.axisLabel.fontWeight" @change="throttleAddHistory" size="mini">
         <!-- 正常加粗细体 -->
          <el-option v-for="item in textStyleOptions" :key='item.value' :label="item.label" :value='item.value'>{{item.label}}</el-option>
        </el-select>
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title"></p>
      <div class="col-2 attr-item-edit-input">
        <el-select v-model="yAxisData.axisLabel.fontFamily" @change="throttleAddHistory" size="mini">
         <!-- 正常加粗细体 -->
          <el-option v-for="item in textOptions" :key='item.value' :label="item.label" :value='item.value'>{{item.label}}</el-option>
        </el-select>
      </div>
      <div class="col-2 attr-item-edit-input">
        <el-input placeholder="颜色" v-model="yAxisData.axisLabel.color" size="mini" class="input-with-select">
        </el-input>
        <el-color-picker class="colorChoose" size="mini" v-model="yAxisData.axisLabel.color"></el-color-picker>
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">网格线显示</p>
      <div class="col-2 attr-item-edit-input">
        <el-switch v-model="yAxisData.splitLine.show" size="mini">
        </el-switch>
        <span class="colorLabel">颜色</span>
      </div>
      <div class="col-2 attr-item-edit-input">
        <el-input placeholder="颜色" v-model="yAxisData.splitLine.lineStyle.color" size="mini" class="input-with-select">
        </el-input>
        <el-color-picker class="colorChoose" size="mini" v-model="yAxisData.splitLine.lineStyle.color"></el-color-picker>
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">轴线样式</p>
      <div class="col-1 attr-item-edit-input">
        <el-input placeholder="颜色" v-model="yAxisData.axisLine.lineStyle.color" size="mini" class="input-with-select">
        </el-input>
        <el-color-picker class="colorChoose" size="mini" v-model="yAxisData.axisLine.lineStyle.color"></el-color-picker>
      </div>
    </div>
  </div>

</template>

<script>
	export default {
		props: {
			//yAxisConfig: Object
      yAxisData:Object
		},
    computed: {
      // yAxisData(){
      //   return this.yAxisConfig.yAxis[1]
      // },
      
		},
		components: {
		},
    data() {
      return {
        textOptions: [{
            value: "Microsoft YaHei",
            label: "微软雅黑"
          },
          {
            value: "monospace",
            label: "方正"
          }
        ],
        textStyle: "正常",
        textStyleOptions: [{
            value: "normal",
            label: "正常"
          },
          {
            value: "bold",
            label: "加粗"
          },
          {
            value: "lighter",
            label: "细体"
          }
        ],
        yAxisDataMin:0,
        yAxisDataMax:0
      }
    },
    watch: {
      yAxisDataMin:{
        deep:true,
        handler(newV,oldV){
          this.yAxisData.min = newV
        }
      },
      yAxisDataMax:{
        deep:true,
        handler(newV,oldV){
          this.yAxisData.max = newV
        }
      }
    },
    methods: {
      throttleAddHistory(){}
    },
    created() {
		},
		mounted() {
		},
	}
</script>
<style lang="scss">
// .el-select{
//   width: 100%;
// }
.colorLabel{
  float: right;
}
.el-color-picker__trigger{
  border: 0;
}
.textRight{
  text-align: right;
}
.textLeft{
  text-align: left;
}
.attr-item-edit-input{
  position: relative;
  .colorChoose{
    position: absolute;
    right: 0;
  }
}
</style>
<style lang="scss">
// .el-select{
//   width: 100%;
// }
.el-color-picker__trigger{
  border: 0;
}
.textRight{
  text-align: right;
}
.textLeft{
  text-align: left;
}
.attr-item-edit-input{
  position: relative;
  .colorChoose{
    position: absolute;
    right: 0;
  }
}
</style>
<style lang="scss" scoped>
  .sizeAndPosition-wrapper {
    display: flex;
    width: 100%;
  }

  .align-type-item {
    flex: 1;
    cursor: pointer;
    text-align: center;
    &.clearFlex {
      width: 42px;
      flex: none;
    }
    i {
      line-height: 1;
      display: inline-block;
      padding: 6px;
      border-radius: 4px;
      background: rgba(37, 165, 137, 0.08);
    }
    &:hover {
      i {
        color: white;
        background: $primary;
      }
    }
  }

  .attr-item-edit-wrapper {
    padding-left: 18px;
    display: flex;
    width: 100%;
    // text-align: center;
    padding-bottom: 10px;
    .attr-item-title {
      text-align: left;
      min-width: 60px;
      font-size: 12px;
    }
    .attr-item-edit-input {
      &.col-2 {
        width: 90px;
        margin-left: 10px;
      }
      &.col-1 {
        width: 190px;
        margin-left: 10px;

      }
      &.col-3 {
        width: 60px;
        margin-left: 10px;
      }
      &.col-4 {
        width: 50px;
        margin-left: 10px;
      }
      .attr-item-edit-input-des {
        text-align: center;
        line-height: 1;
        margin-top: 2px;
        font-size: 12px;
        color: $gray;
      }
    }
  }
</style>
<style lang="scss">
  .attr-item-edit-wrapper {
    .el-input-number.is-controls-right .el-input__inner {
      padding-left: 2px;
      padding-right: 32px;
      width: 90px;
    }
    .el-input-number--mini {
      width: 90px;
    }
    .el-slider__runway.show-input {
      margin-right: 108px;
    }
  }
</style>